<template>
<el-popover
  placement="bottom"
  width="240"
  class="bus-status"
  trigger="click">
  <div style="margin-bottom: 16px">
    <div class="auto-row">
      <span class="label">自动接单</span>
      <el-switch
        v-model="form.autoAssign"
        @change="saveOrderConfig"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
    </div>
    <div class="auto-row" v-if="form.autoAssign">
      <span class="label">最大接单数量</span>
      <el-select v-model="form.assignMax" filterable placeholder="请选择" size="mini" @change="saveOrderConfig">
        <el-option
          v-for="item in maxNumber"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
  <span class="el-dropdown-link" slot="reference">
    <i class="V7_iconfont V7_iconV7tubiao_dian statusIcon" :style="{color: statusColor(form.autoAssign)}"></i>
    <i class="V7_iconfont V7_iconzidongjiedan"></i>
  </span>
</el-popover>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
@Component({
  name: 'businessStatus'
})
export default class WebchatStatus extends Vue {
  private form = {
    autoAssign: false,
    assignMax: 10,
    agentId: '',
    autoAssignMin: 1,
    autoAssignMax: 10
  }

  private maxNumber: any = []

  private $store: any
  private $message: any

  private statusColor (status: boolean) { // 状态颜色
    if (status === true) {
      return '#008BEE'
    } else if (status === false) {
      return '#FC6B5C'
    }
  }

  private forNumber (num, obj, targetNum) {
    for (let i = targetNum; i < num + 1; i++) {
      obj.push({
        label: i,
        value: i
      })
    }
    return obj
  }

  private get userId () {
    const { _id } = this.$store.state.common.session.user
    return _id
  }

  private saveOrderConfig () {
    const { assignMax, agentId, autoAssign } = this.form
    const data: any = { url: '/server-flow/action/agent/config/autoAssign', method: 'post', data: { assignMax, agentId, autoAssign } }
    commonAction(data).then((res) => {
      if (res.success) {
        this.$message.success('状态变更成功！')
      }
    })
  }

  private getOrderMsg () {
    const data: any = { url: '/server-flow/action/agent/config/autoAssign?agentId=' + this.userId, method: 'get' }
    commonAction(data).then((res) => {
      if (res.success) {
        this.form = res.data
        this.forNumber(res.data.autoAssignMax, this.maxNumber, res.data.autoAssignMin)
      }
    })
  }

  private mounted () {
    this.getOrderMsg()
  }
}
</script>
<style lang="stylus" scoped>
.auto-row {
  display: flex;
  margin: 0px 10px;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  .label {
    width 200px
    color: #303753;
    font-size: 12px
    font-weight: 400;
  }
}
.el-dropdown-link
  position relative
  cursor pointer
  margin-left: 20px
  vertical-align: middle;
  display: inline-block;
  .statusIcon
    position absolute
    color #008BEE
    top -10px
    right -8px
</style>
